<template>
    <div class="list" v-if="dataTotal > 0">
        <div class="box" v-for="order in dataList" :key="order.id">
            <div class="line">
                <span class="title">{{ order.donation.title }}</span>
                <span class="amount">{{ order.donation_amount }}&nbsp;{{ order.currency }}</span>
            </div>
            <div class="line date_data">
                <span class="date">{{ order.notify_time_date }}</span>
                <span class="pay_data">(支付方式)Paypal</span>
            </div>
        </div>
    </div>
    <div style="display: flex;justify-content:center;align-items: center;margin-top:20rem;" v-show="isLoading">
        <a-spin size="large" :spinning="isLoading"></a-spin>
    </div>
    <div style="display: flex;justify-content:center;align-items: center;margin-top:20rem;color:#666666;cursor: pointer;"
        v-show="!isLoading && dataLastPage > dataCurrPage">
        <span @click="getMore()">加载更多</span>
    </div>
    <div style="display: flex;justify-content:center;align-items: center;margin-top:20rem;height: 50rem;color:#666666;"
        v-show="!isLoading && dataTotal == 0">
        <span>暂无数据</span>
    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted, inject } from 'vue';   //引入ref
import { getDonationMyOrderList } from "@/api/web";   //引入api
const props = defineProps(['donationId']);  // 接收父组件传参

const isLoading = ref(false);    // 控制loading

// 接口获取到的数据
const apiData = ref({});
const dataCurrPage = ref(1);   // 当前页数
const dataPageSize = ref(10);   // 每页显示条数
const dataLastPage = ref(1);    // 总页数
const dataTotal = ref(0);    // 总条数
const dataList = ref([]);    // 数据列表

// 获取更多
const getMore = () => {
    dataCurrPage.value++;
    getData();
}

// 获取数据
const getData = () => {
    isLoading.value = true;
    //根据需求可以通过data传入参数
    const searchData = { donation_id: props.donationId, page: dataCurrPage.value };
    getDonationMyOrderList(searchData).then((res) => {
        isLoading.value = false;
        if (res === false) return;

        apiData.value = res.data;
        dataList.value.push(...res.data.data);
        dataLastPage.value = res.data.last_page;
        dataCurrPage.value = res.data.current_page;
        dataTotal.value = res.data.total;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

onMounted(() => {
    getData()
})
</script>

<style scoped>
.list {}

.list>.box {
    border-bottom: 1rem solid #F2F3F7;
    padding: 12rem 0;
}

.list>.box>.line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20rem;
    line-height: 20rem
}

.list>.box>.line>.title {
    max-width: 70%;
    font-weight: bold;
    font-size: 14rem;
    color: #333333;
}

.list>.box>.line>.amount {
    max-width: 30%;
    font-weight: bold;
    font-size: 14rem;
    color: #D4352D;
}

.list>.box>.date_data {
    color: #999999;
    margin-top: 6rem;
    height: 17rem;
    line-height: 17rem;
}

.list>.box>.line>.pay_data {
    font-weight: 400;
    font-size: 12rem;
}

.list>.box>.line>.date {
    font-weight: 400;
    font-size: 12rem;
}
</style>
